.progressTime {
  width: 100%;
  height: 32px;
  line-height: 32px;
  z-index: 999;
  position: relative;
  display: flex;

  .progressTime-left {
    width: 43px;
    height: 32px;
    vertical-align: middle;
    display: inline-block;
    position: relative;

    .progressTime-left-start {
      position: absolute;
      top: 50%;
      left: 0;
      width: 16px;
      height: 16px;
      margin-left: 16px;
      margin-top: -8px;
      cursor: pointer;
      background: url('../../assets/images/maptime/time_slider_sprite.png') no-repeat;
      background-position: -32px 0px;
    }

    .progressTime-left-start.stop {
      background-position: -16px 0px;
    }
  }

  .progressTime-center {
    width: calc(100% - 115px);
    height: 32px;
    display: inline-block;
    position: relative;
    margin: 0 20px;
    padding-top: 5px;

    .progressTime-center-t {
      height: 4px;
      background-color: rgba(61, 180, 255, 0.25);
      box-sizing: border-box;
      cursor: pointer;
      position: relative;

      .progressTime-center-t-zhi {
        display: none;
      }

      .progressTime-center-t-bar {
        background: #3db4ff;
        height: 100%;
        width: 0%;
      }

      .progressTime-center-t-tooltip {
        position: absolute;
        top: -5px;
        width: 4px;
        height: 16px;
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        white-space: nowrap;
        background: #ff8f3d;
        border-radius: 2px;
        z-index: 10;
      }

      .progressTime-center-t-ul {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1;
        height: 100%;
        display: flex;

        li {
          float: left;
          border-left: 0;
          box-sizing: border-box;
          height: 100%;
        }
      }
    }

    .progressTime-center-c {
      height: 26px;
      line-height: 26px;
      display: list-item;

      .progressTime-center-c-ul {
        width: 100%;

        .progressTime-center-c-ul-li {
          height: 100%;
          float: left;
          box-sizing: border-box;
          position: relative;
          padding-top: 7px;

          span {
            position: absolute;
            color: #c5dae8;
            font-size: 12px;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);

            b {
              font-weight: normal;
              white-space: nowrap;
              display: inline-block;
            }

            i {
              width: 1px;
              height: 10px;
              background-color: rgba(255, 255, 255, 0.3);
              display: inline-block;
              position: absolute;
              left: calc(50% - 1px);
              z-index: 1;
              top: -6px;
            }
          }
        }
      }
    }
  }

  .progressTime-right {
    width: 72px;
    height: 32px;
    vertical-align: middle;
    display: inline-block;
    position: relative;

    span {
      width: 16px;
      height: 16px;
      cursor: pointer;
      background: url('../../assets/images/maptime/time_slider_sprite.png') no-repeat;
      background-position: -48px 0px;
      display: inline-block;
      vertical-align: middle;
    }

    .progressTime-right-b-youce {
      margin-left: 20px;
      background-position: 0px 0px;
    }
  }
}
